<html>
<head>
    <title>用户管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }




    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">用户管理</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">

                    <div class="main-head">
                        <el-form :inline="true">
                            <el-form-item label="">
                                <el-input v-model="roleName"  placeholder="角色名称" style="width: 220px"></el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="searchRole" >查询</el-button>
                                <el-button type="success" @click="addClick" >新增</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <el-table   border stripe style="width: 100%" :data="tabData">
                        <el-table-column prop="Id" label="角色id" align="center">
                        </el-table-column>
                        <el-table-column prop="roleNo" label="角色编号"  align="center">
                        </el-table-column>
                        <el-table-column prop="roleName" label="角色名称"  align="center">
                        </el-table-column>
                        <el-table-column prop="roleDesc" label="角色描述"  align="center">
                        </el-table-column>

                        <el-table-column label="操作"  align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" round size="small"  icon="el-icon-edit"></el-button>
                                <el-button  round icon="el-icon-delete"  size="small" @click="delClick(scope.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>

            </el-col>
        </el-row>
        <el-dialog title="新增角色"
                   :visible.sync="editFormVisible"
                   center
                   width="35%"
                   >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="角色编号" prop="roleNo" :rules="[
                             {required:true,message:'ID不能为空!',trigger:'blur'}
                ]" >
                    <el-input v-model="form.roleNo" ></el-input>
                </el-form-item>
                <el-form-item label="角色名称" prop="roleName" :rules="[
                             {required:true,message:'名称不能为空!',trigger:'blur'}
                ]" >
                    <el-input v-model="form.roleName" ></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc" :rules="[
                             {required:true,message:'描述不能为空!',trigger:'blur'}
                            ]" >
                    <el-input  v-model="form.roleDesc" ></el-input>
                </el-form-item>
                <el-form-item label="角色菜单">
                    <div style="height: 200px;overflow-y: auto;" >
                        <el-tree
                                :data="menuTree"
                                show-checkbox
                                node-key="id"
                                default-expand-all
                                check-strictly="true"
                                ref="tree"
                                :props="defaultProps">
                        </el-tree>

                    </div>
                </el-form-item>
                <el-form-item style="text-align: center">
                    <el-button @click="editFormVisible = false" style="background-color: #7eb8b0  ">取消</el-button>
                    <el-button  @click="submitClick('form')" style="margin-left: 40px;background-color: #f9b317;">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>


</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-monitor',
        data:{
            editFormVisible:false,
            roleName:'',
            tabData:[],
            menuTree:[],
            defaultProps: {
                label: 'title',
                id:'value'
            },
            form:{}
        },
        methods:{

            addClick:function(data) {
             this.form  = {};
            this.editFormVisible = true
            },
            searchRole(){
                console.log(this.$refs.tree.getCheckedNodes());
            },
            delClick(data){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('role/Delete',{Id:data.id}).success((res)=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getRole();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            submitClick(formName){
                console.log(this.$refs.tree.getCheckedNodes());
                this.$refs[formName].validate((valid) =>{
                    if (valid){
                        if (this.$refs.tree.getCheckedNodes().length==0){
                            this.$message({
                                type:'error',
                                message:'菜单未选择'
                            })
                        } else{
                            this.$message({
                                type:'success',
                                message:'保存成功'
                            })
                        }

                    }else{
                        this.$message({
                            type:'error',
                            message:'输入内容不能为空'
                        })
                    }
                });
            },
            getRole(params){
                HttpUtil.get('role/list',params).success((res)=>{
                         this.tabData = res.data
                })
            },
            getMenuAll(params){
                HttpUtil.get('menu/Descendant',params).success((res)=>{
                    this.menuTree = res.data;
                })
            },

        },
        created:function(){
              this.getMenuAll();
              this.getRole();
        },
        mounted:function(){

        }
    });


</script>

</body>
</html>
